import * as React from 'react'
import { TextareaItem, Picker, Toast } from 'antd-mobile'
import { NavBar, Item, Icon, Button, Switch } from 'components'
import division from 'china-division/dist/pca-code.json'
import './NewAddress.less'
import { verify } from 'muka'
import { post } from '../../../../utils'

const address = (arrs: any) => {
    return arrs.map((item: any) => {
        const val: any = {
            value: item.name,
            label: item.name
        }
        if (item.children) {
            val.children = address(item.children)
        }
        return val
    })
}

const addr = address(division)

export default class NewAddress extends React.Component<any, any> {
    public state = {
        visible: false
    }

    public customFocusInst: any

    public render(): JSX.Element {
        const { visible } = this.state
        const { newAddress } = this.props
        return (
            <div className="newAddress">
                <NavBar
                    title={<div style={{ fontSize: '0.97rem', color: '#222' }}>新建收货地址</div>}
                    fixed={true}
                />
                <Item
                    className="newAddress_transferInfo_item"
                    title={<div className="newAddress_transferInfo_title">收货人</div>}
                    value={<div className="newAddress_transferInfo_value">
                        <input type="text" placeholder="收货人姓名" value={newAddress.name} onChange={this.handleChangeInput.bind(this, 'name')} />
                    </div>}
                />
                <Item
                    className="newAddress_transferInfo_item"
                    title={<div className="newAddress_transferInfo_title">手机号码</div>}
                    value={<div className="newAddress_transferInfo_value"><input type="tel" value={newAddress.tel} placeholder="手机号码" maxLength={11} onChange={this.handleChangeInput.bind(this, 'tel')} /></div>}
                />
                <Item
                    className="newAddress_transferInfo_item"
                    title={<div className="newAddress_transferInfo_title">所在地区</div>}
                    value={<div className="newAddress_transferInfo_value" onClick={() => { this.setState({ visible: true }) }}>{newAddress.province && (newAddress.province + '/')}{newAddress.city && (newAddress.city + '/')}{newAddress.area}<Icon type="more" /></div>}
                />
                <Item
                    className="newAddress_transferInfo_item moreHeight"
                    title={<div className="newAddress_transferInfo_title flex">
                        <div style={{ lineHeight: '1rem' }}>
                            详细地址
                        </div>
                        <div>
                            <TextareaItem
                                maxLength={20}
                                rows={2}
                                placeholder="街道/楼牌号等"
                                value={newAddress.address}
                                onChange={this.handleChangeInput.bind(this, 'address')}
                                ref={(el: any) => this.customFocusInst = el}
                            />
                        </div>
                    </div>}
                />
                <Item
                    className="newAddress_transferInfo_item"
                    title={<div className="newAddress_transferInfo_title">设为默认地址</div>}
                    value={<div className="newAddress_transferInfo_value">
                        <Switch
                            checked={newAddress.status}
                            onChange={this.handleChangeInput.bind(this, 'status')}
                        />
                    </div>}
                />
                <div className="newAddress_operation">
                    <div><Button className="newAddress_operation_btn savebtn" onClick={this.handleSave} disabled={this.getStatus()}>保存并使用</Button></div>
                    {newAddress.id && <div><Button className="newAddress_operation_btn deletebtn" onClick={this.handleRemove}>删除地址</Button></div>}
                </div>
                <Picker
                    visible={visible}
                    value={[newAddress.province, newAddress.city, newAddress.area]}
                    data={addr}
                    onOk={this.handlePicker}
                    onDismiss={() => { this.setState({ visible: false }) }}
                />
            </div>
        )
    }

    private getStatus() {
        const { newAddress } = this.props
        if (newAddress.name && verify.isMobile(newAddress.tel) && newAddress.province && newAddress.address) {
            return false
        } else {
            return true
        }
    }

    private handleSave = () => {
        const { newAddress, userInfo, history, addressData, SET_DETAIL_ADDRESS, SET_NEW_ADDRESS } = this.props
        const val = { ...newAddress }
        if (val.status) {
            val.status = 1
        } else {
            val.status = 0
        }
        let uri = 'usersapi/userAddressAdd'
        let msg = '地址添加成功'
        if (newAddress.id) {
            uri = 'usersapi/userAddressEdit'
            msg = '地址修改成功'
        }
        post(uri, {
            ...val,
            userId: userInfo.id,
        }).then((data: any) => {
            const newData = [...addressData]
            if (!newAddress.id) {
                newAddress.id = data
                newData.push(newAddress)

                SET_DETAIL_ADDRESS(newData)
            }
            const newA = {}
            Object.keys(newAddress).map((item: string) => {
                if (item === 'status') {
                    newA[item] = false
                } else {
                    newA[item] = ''
                }
            })
            Toast.info(msg, 2)
            setTimeout(() => { history.goBack(); SET_NEW_ADDRESS(newA) }, 2000)
        })
    }

    private handleRemove = () => {
        const { newAddress, userInfo, history, SET_USER_DEFAULT_ADDRESS, defaultAddress } = this.props
        post('usersapi/userAddressDel', {
            userId: userInfo.id,
            id: newAddress.id
        }).then((data: any) => {
            if (newAddress.id === defaultAddress.id) {
                SET_USER_DEFAULT_ADDRESS({})
            }
            Toast.info('删除地址成功', 2, () => { history.goBack() })
        })
    }

    private handlePicker = (val: any) => {
        const { SET_NEW_ADDRESS, newAddress } = this.props
        const value = { ...newAddress }
        value.province = val[0]
        value.city = val[1]
        value.area = val[2]
        SET_NEW_ADDRESS(value)
        this.setState({
            visible: false
        })
    }

    private handleChangeInput = (key: string, e: any) => {
        const { SET_NEW_ADDRESS, newAddress } = this.props
        const val = { ...newAddress }
        if (key === 'status' || key === 'address') {
            val[key] = e
        } else {
            val[key] = e.target.value
        }
        SET_NEW_ADDRESS(val)
    }
}